/*
  1. 知道 Link 和 NavLink 组件的区别 - NavLink 会有高亮类名
  2.知道如何自定义高亮类名 activeClassName
  3.模糊匹配 和 精准匹配(exact)
*/

import React from 'react';
import ReactDom from 'react-dom/client';
// import 引进时改名使用as,那么以后要切换路由模式，只需要把引进的 属性 改名即可
import { HashRouter as Router, Route, Link, NavLink } from 'react-router-dom';
import './index.css';

class Handler extends React.Component {
  render() {
    return (
      <div>
        {/* HashRouter负责路由实例化 */}
        <Router>
          {/* Link组件，to属性代表要跳转的路径 */}
          <Link to="/home">首页</Link>
          <br />
          <Link to="/my">我的音乐</Link>
          <br />
          <Link to="/friend">发现</Link>
          <br />
          <br />

          {/* NavLink组件会携带上一个class类名，class="active" */}
          {/* activeClassName自定义设置类名 */}
          {/* exact精确匹配 */}
          <NavLink to="/home" exact activeClassName="nav_active">
            首页
          </NavLink>
          <br />
          <NavLink to="/my">我的音乐</NavLink>
          <br />
          <NavLink to="/friend">发现</NavLink>

          <Route path="/Home" component={Home}></Route>
          <Route path="/My" component={My}></Route>
          <Route path="/Friend" component={Friend}></Route>
        </Router>
      </div>
    );
  }
}

function Home() {
  return (
    <div>
      <h1>我是Home组件</h1>
    </div>
  );
}
function My() {
  return (
    <div>
      <h1>我是My组件</h1>
    </div>
  );
}
function Friend() {
  return (
    <div>
      <h1>我是Friend组件</h1>
    </div>
  );
}

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
